<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <hr/>

    <button @click="gotoLk">push跳转到洛基页面</button>
    <button @click="gotoLk2">replace跳转到洛基页面</button>
    <hr/>
    <router-link to="/main">访问后台主页</router-link>
  </div>
</template>
<script>
export default {
  name: 'Home',
  methods: {
    gotoLk() {
      //通过编程式导航API,导航到指定页面,并增加一条历史记录
      this.$router.push('/movie/2')
    },
    gotoLk2() {
      //通过编程式导航API,导航到指定页面,并替换当前的历史记录
      this.$router.replace('/movie/1')
    }
  }
}
</script>

//为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：
<style lang="less" scoped>
.home-container {
  background-color: orange;
  min-height: 200px;
  padding-left: 10px;
  h3 {
    margin: 0;
    padding-top: 10px;
  }
}
</style>
